<template>
  <el-container>
    <el-header>
      <header-bar></header-bar>
    </el-header>
    <!-- 侧边栏 -->
    <el-container>
      <el-aside width="200px" class="aside">
        <el-menu
          router
          :default-active="asideActive"
          @select="handleSelect"
          active-text-color="#000"
          background-color="#fff"
        >
          <el-menu-item class="menuitem" index="/index/discover">
            <i class="el-icon-star-off"></i>
            <span
              class="discover iconfont"
              :class="{ fontweight: asideActive === '/index/discover' }"
              >发现音乐</span
            >
          </el-menu-item>
          <el-menu-item index="/index/video">
            <i class="el-icon-video-play"></i>
            <span
              class="video iconfont"
              :class="{ fontweight: asideActive === '/index/video' }"
              >视频</span
            >
          </el-menu-item>
          <el-menu-item index="/index/collect">
            <i class="el-icon-collection"></i>
            <span
              class="collect iconfont"
              :class="{ fontweight: asideActive === '/index/collect' }"
              >收藏</span
            >
          </el-menu-item>
          <el-menu-item index="/index/nobreak">
            <i class="el-icon-bell"></i>
            <span
              class="NoBreak iconfont"
              :class="{ fontweight: asideActive === '/index/nobreak' }"
              >每日推荐</span
            >
          </el-menu-item>
          <el-menu-item-group v-if="createListType">
            <template slot="title">创建的歌单</template>
            <el-menu-item
              :index="`/index/musicDateil/?id=${item.id}`"
              class="createItem"
              :class="{
                fontweight: asideActive === `/index/musicDateil/${item.id}`
              }"
              v-for="item in createdMusicList"
              :key="item.id"
            >
              <i class="el-icon-paperclip"></i>
              {{ item.name }}</el-menu-item
            >
          </el-menu-item-group>
          <el-menu-item-group v-if="createListType">
            <template slot="title">收藏的歌单</template>
            <el-menu-item
              :index="`/index/musicDateil/?id=${item.id}`"
              class="createItem"
              :class="{
                fontweight: asideActive === `/index/musicDateil/${item.id}`
              }"
              v-for="item in collectedMusicList"
              :key="item.id"
            >
              <i class="el-icon-paperclip"></i>
              {{ item.name }}</el-menu-item
            >
          </el-menu-item-group>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view class="main" :key="$route.fullPath"></router-view>
        <!-- 用于下载的a标签 -->
        <a
          :href="downloadMusicInfo.url"
          :download="downloadMusicInfo.name"
          target="_blank"
          id="downloadCurrentMusic"
        ></a>
      </el-main>
    </el-container>
    <player></player>
    <musicDetailCard></musicDetailCard>
    <div class="tip">
      <el-dialog
        title="项目介绍"
        :visible="showTip"
        width="50%"
        @close="showTip = false"
        :modal-append-to-body="false"
        class="tipBox"
        v-if="isFirst"
      >
        <div class="info">
          <p class="title">项目来自gitte : CodeMan / vue_cloud_music</p>
          <a
            target="_blank"
            href="https://gitee.com/PengGeee/vue_cloud_music?_from=gitee_search"
            >https://gitee.com/PengGeee/vue_cloud_music?_from=gitee_search</a
          >
          <p>主要技术栈:vue2 element-ui vueRouter vuex</p>
          <h3>注意事项:</h3>
          <p>
            最好是<i>登录</i>访问,因为原作者的版本也是需要登录才能访问很多功能,而且关于登录的key我并没有找到,用的是用户Id做后续判断
          </p>
          <p>
            复现了大部分功能,还有小部分功能实现方式不同,当然性能有很明显的下降0.0...
            出现<i>Bug</i>刷新刷新
          </p>
          <p>新加了一个背景Mv的效果,很多歌曲并没有对应的Mv</p>
          <p>
            置顶使用的是element-ui的backTop,没使用原作者写的组件偷懒了,还有很多Icon都是只在ele-ui里面找的,所以有很多icon不是很符合场景
          </p>
          <p>
            我还是一个前端小菜鸟,这算是第一个大一点的项目,找了很久...之前都是写的各种商城，教学案例什么的所以这次想写个不一样的...
          </p>
          <p class="like">
            希望有喜欢前端的小伙伴可以一起交流学习--QQ:789380920
          </p>
          <div class="warning">
            <div class="arrows">
              <i
                class="el-icon-bottom"
                :class="isArrowsMove ? 'arrowsMove' : ''"
              ></i>
            </div>
            <div class="hint">
              这个提示窗口只会出现一次,想再次查看此页面，需要清空localStorage中的'firstShowTip',当然也可以打开源码...如果是哥哥的话想怎么搞都可以哦
            </div>
          </div>
          <div class="Qrcode">
            <img src="@/assets/img/Qqun.png" alt="" />
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="showTip = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </el-container>
</template>
<script>
import HeaderBar from '@/components/headerBar/HeaderBar.vue'
import player from './components/player.vue'
import { getUserMusicList } from '@/api/login/login'
import axios from 'axios'
import musicDetailCard from './components/musicDetailCard.vue'
export default {
  components: {
    HeaderBar,
    player,
    musicDetailCard
  },
  data() {
    return {
      asideActive: '/index/discover', // 侧边栏active
      createdMusicList: [], //创建的歌单
      collectedMusicList: [], // 收藏的歌单
      createListType: false, // 创建的歌单是否显示
      // 下载的音乐的信息
      downloadMusicInfo: {
        name: '',
        url: ''
      },
      // 项目介绍提示
      showTip: true,
      // 是否是第一次进入
      isFirst: true,
      // 提示箭头是否闪烁
      isArrowsMove: false,
      // 记录闪烁定时器
      timerArrows: null
    }
  },
  methods: {
    handleSelect(index) {
      if (!this.$store.state.isLogin && index !== '/index/discover') {
        // this.$message.warning('很抱歉,这次不行!请登录后重试!')
        return
      }
      // console.log(this.$route.path)

      // this.asideActive = this.$route.path

      this.asideActive = index
      localStorage.setItem('asideActive', index)
      // console.log(index)
    },
    //获取用户歌单信息
    async getUserMusicList() {
      let timeStamp = Date.parse(new Date()) // 这种时间戳最后面的毫秒变成了000
      // let timeStamp2 = Date.now() // 正常时间戳
      let {
        data: { playlist }
      } = await getUserMusicList({
        uid: localStorage.getItem('userId'),
        timeStamp
      })
      // item.subscribed === true 是收藏歌单其他都是创建的歌单
      let index = playlist.findIndex((item) => item.subscribed === true)
      this.createdMusicList = playlist.slice(0, index)
      this.collectedMusicList = playlist.slice(index)
      this.createListType = true
      // console.log(playlist)
      this.$store.commit('updataCreatedMusicList', playlist.slice(0, index))
      this.$store.commit('updataCollectedMusicList', playlist.slice(index))
      this.$store.commit('updataCreateListType', true)
    },
    isShowTip() {
      this.showTip = true
      this.arrowsMove()
    },
    // 提示箭头动态
    arrowsMove() {
      this.timerArrows = setInterval(() => {
        this.isArrowsMove = !this.isArrowsMove
        // console.log('箭头定时器在运行', this.isArrowsMove)
      }, 500)
    }
  },
  mounted() {
    this.isShowTip()
    const active = localStorage.getItem('asideActive') // 保证刷新所在的侧边栏选中不刷新
    if (!active) {
      // console.log('空')
      let path = this.$route.fullPath
      let index = path.lastIndexOf('/')
      path = path.slice(0, index)
      // console.log(path)
      localStorage.setItem('asideActive', path)
      this.asideActive = path
    } else {
      this.asideActive = active
    }
  },
  created() {
    if (localStorage.getItem('firstShowTip')) {
      if (Date.now() > +localStorage.getItem('firstShowTip')) {
        this.isFirst = false
        console.log('不是第一次进入,不显示项目介绍')
      }
    } else {
      localStorage.setItem('firstShowTip', Date.now())
    }
  },
  watch: {
    // 登录了就获取用户创建的歌单信息
    '$store.state.isLogin'(current) {
      if (current) {
        this.getUserMusicList()
      } else {
        this.createListType = []
        this.collectedMusicList = []
        this.createListType = false
      }
    },
    '$store.state.downloadMusicInfo'(current) {
      // console.log(current, '下载的音乐信息变化了')
      axios
        .get(current.url, { responseType: 'blob' })
        .then((res) => {
          // console.log(res)
          let blob = res.data
          let url = URL.createObjectURL(blob)
          // console.log(url)
          let a = document.querySelector('#downloadCurrentMusic')
          this.downloadMusicInfo.url = url
          this.downloadMusicInfo.name = current.name
          this.$nextTick(() => {
            a.click()
            URL.revokeObjectURL(url)
          })
        })
        .catch((error) => {
          console.log(error)
          this.$message.error('部分歌曲可下载!')
        })
    },
    // 监视提示框是否还显示，如果关闭了清除提示箭头定时器
    showTip(type) {
      // console.log(type)
      if (!type) {
        clearTimeout(this.timerArrows)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
// .el-main {
//   overflow: hidden;
// }
// aside选中加粗
.aside {
  height: 100%;
  overflow: hidden;
  overflow-y: scroll;
  i {
    color: #000 !important;
  }
}
.aside::-webkit-scrollbar {
  display: none;
}
.fontweight {
  font-weight: 700;
}
.iconfont {
  font-size: 16px;
  // font-family: 'Harmony Font' !important;
  // src: url('@/assets/font/HarmonyOS_Sans_SC_Medium.ttf');
}
.iconfont::before {
  margin-right: 5px;
}
.el-menu-item:hover {
  background-color: #e5e5e5 !important;
}
.createItem {
  // display: flex;
  // align-items: center;
  padding-left: 10px;
  font-size: 16px;
  line-height: 56px;
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis !important;

  &::before {
    margin-right: 5px;
  }
}
.el-container {
  height: calc(95vh - 60px);
  // overflow: hidden;
  // overflow: none;
}
// player
.player {
  position: fixed;
  bottom: 0;
  background-color: #fff;
  height: 60px;
  width: 100%;
  // line-height: 60px;
  padding: 0 20px;
  // padding-left: 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
// 项目介绍
.tip {
  .el-button {
    border: none;
    background-color: #ec4141;
    &:hover {
      background-color: #e91e1e;
    }
  }
}
:deep(.el-icon) {
  &:hover {
    color: #ec4141 !important;
  }
}
:deep(.el-dialog__body) {
  padding-top: 0px;
}
// 提示tip
.info {
  .title {
    font-size: 20px;
    font-weight: 700;
  }
  a {
    font-size: 14px;
    margin-left: 20px;
  }
  p {
    font-size: 16px;
    text-indent: 1em;
    padding: 5px 0;
  }
  .Qrcode {
    width: 100%;
    display: flex;
    justify-content: end;
    img {
      width: 200px;
      margin-right: 100px;
      border-radius: 15px;
    }
  }

  i {
    font-style: normal;
    color: #ec4141;
  }
  .like {
    font-weight: 700;
  }
  .warning {
    width: 30%;
    position: absolute;
    bottom: 0;
    left: 0;
    text-indent: 2em;

    .hint {
      opacity: 0;
      transition: all 1s;
      &:hover {
        opacity: 1;
      }
    }
  }
  .el-icon-bottom {
    position: absolute;
    bottom: 130px;
    left: 150px;
    color: #666;
    font-size: 20px;
    transform: rotate(45deg);
  }
}
// 箭头闪烁
.arrowsMove {
  bottom: 120px !important;
  left: 140px !important;
  font-size: 25px !important;
}
</style>
